import { getTranslations, setRequestLocale } from "next-intl/server";
import { Link } from "@/i18n/navigation";
import { courses, type CourseCategory } from "@/data/courses";
import { SectionHeading } from "@/components/section-heading";
import { IconBook, IconChart, IconShield } from "@/components/icons";
import { HomeHeroCarousel } from "@/components/home-hero-carousel";

type Props = { params: Promise<{ locale: string }> };

export default async function HomePage({ params }: Props) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("home");
  const tc = await getTranslations("courses");
  const featured = courses.slice(0, 5);
  const featuredCoverMap: Record<CourseCategory, string> = {
    trial: "/免费试听--状态--锁定、解锁.png",
    practical: "/系统课程--状态--锁定、解锁.png",
    book: "/拆书章节视频--状态--锁定、解锁.png",
    topic: "/专题视频-状态--锁定、解锁.png",
    strategy: "/策略报告--状态--锁定、解锁.png",
  };

  const stats = [
    { value: t("stat1"), label: t("stat1Label") },
    { value: t("stat2"), label: t("stat2Label") },
    { value: t("stat3"), label: t("stat3Label") },
    { value: t("stat4"), label: t("stat4Label") },
  ];

  const pillars = [
    {
      icon: IconBook,
      title: t("pillar1Title"),
      desc: t("pillar1Desc"),
      accent: "from-blue-500 to-indigo-600",
    },
    {
      icon: IconChart,
      title: t("pillar2Title"),
      desc: t("pillar2Desc"),
      accent: "from-amber-500 to-orange-600",
    },
    {
      icon: IconShield,
      title: t("pillar3Title"),
      desc: t("pillar3Desc"),
      accent: "from-emerald-500 to-teal-600",
    },
  ];

  const heroBanners = ["/banner1.png", "/banner2.png", "/banner3.png", "/banner4.png", "/banner5.png"];

  return (
    <div>
      {/* Hero：左文案 + 右轮播 + 统一背景 */}
      <section className="ui-enter relative overflow-hidden border-b border-slate-200/80 bg-gradient-to-br from-slate-900 via-[#0f1b2d] to-slate-900 text-white">
        <div className="hero-grid pointer-events-none absolute inset-0 z-0 opacity-40" />
        <div className="pointer-events-none absolute -right-16 top-16 z-0 h-72 w-72 rounded-full bg-blue-500/18 blur-3xl" />
        <div className="pointer-events-none absolute -left-20 bottom-8 z-0 h-64 w-64 rounded-full bg-amber-500/12 blur-3xl" />

        <div className="site-container relative z-10 grid gap-10 py-16 md:grid-cols-2 md:items-center md:py-20 lg:gap-14">
          <div className="max-w-xl md:pr-4">
            <p className="text-sm font-semibold tracking-wide text-amber-300/95">
              {t("heroEyebrow")}
            </p>
            <h1 className="font-serif mt-4 text-4xl font-bold leading-[1.12] tracking-tight text-white md:text-5xl lg:text-[3.15rem]">
              {t("heroTitle")}
            </h1>
            <p className="mt-5 max-w-lg text-base leading-relaxed text-slate-200 md:text-lg">
              {t("heroSubtitle")}
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-4">
              <Link
                href="/courses"
                className="ui-interactive-btn inline-flex min-w-[130px] items-center justify-center rounded-full bg-gradient-to-r from-amber-400 to-amber-500 px-7 py-3 text-sm font-bold text-[var(--navy)] shadow-xl shadow-amber-500/20 transition hover:from-amber-300 hover:to-amber-400"
              >
                {t("ctaCourses")}
              </Link>
              <Link
                href="/about"
                className="ui-interactive-btn inline-flex min-w-[130px] items-center justify-center rounded-full border border-white/35 bg-white/8 px-7 py-3 text-sm font-semibold text-white transition hover:border-white/55 hover:bg-white/12"
              >
                {t("ctaAbout")}
              </Link>
            </div>
          </div>

          <div className="relative w-full md:justify-self-end md:pl-4">
            <div className="w-full md:max-w-[720px]">
            <HomeHeroCarousel images={heroBanners} />
            </div>
          </div>
        </div>

        {/* 数据条 */}
        <div className="relative z-10 border-t border-white/10 bg-black/20">
          <div className="site-container grid grid-cols-2 gap-6 py-8 md:grid-cols-4">
            {stats.map((s) => (
              <div key={s.label} className="text-center md:text-left">
                <p className="font-serif text-3xl font-bold text-white md:text-4xl">{s.value}</p>
                <p className="mt-1 text-sm text-slate-400">{s.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 三大支柱 */}
      <section className="ui-enter ui-enter-delay-1 site-container section-block">
        <SectionHeading
          eyebrow={t("pillarsEyebrow")}
          title={t("pillarsTitle")}
          align="center"
        />
        <div className="mt-14 grid gap-8 md:grid-cols-3">
          {pillars.map((p) => {
            const Icon = p.icon;
            return (
            <div
              key={p.title}
              className="ui-interactive-card group shadow-card rounded-3xl border border-slate-200/90 bg-white p-8"
            >
              <div
                className={`flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br ${p.accent} text-white shadow-lg`}
              >
                <Icon className="h-7 w-7" aria-hidden />
              </div>
              <h3 className="font-serif mt-6 text-xl font-bold text-[var(--navy)]">{p.title}</h3>
              <p className="mt-3 text-sm leading-relaxed text-slate-600">{p.desc}</p>
            </div>
            );
          })}
        </div>
      </section>

      {/* 精选课程 */}
      <section className="ui-enter ui-enter-delay-2 border-y border-slate-200/90 bg-gradient-to-b from-slate-50/80 to-white py-20">
        <div className="site-container">
          <div className="flex flex-col items-start justify-between gap-6 md:flex-row md:items-end">
            <div className="min-w-0 flex-1">
              <SectionHeading
                eyebrow={t("featuredEyebrow")}
                title={t("featuredTitle")}
                align="left"
              />
            </div>
            <Link
              href="/courses"
              className="ui-interactive-btn shrink-0 rounded-full border-2 border-blue-600 px-6 py-2.5 text-sm font-bold text-blue-700 transition hover:bg-blue-600 hover:text-white"
            >
              {t("viewAll")}
            </Link>
          </div>

          <div className="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            {featured.map((c) => (
              <Link
                key={c.slug}
                href={`/courses?cat=${c.category}`}
                className="ui-interactive-card group shadow-card overflow-hidden rounded-3xl border border-slate-200/90 bg-white"
              >
                <div className="relative h-36 overflow-hidden">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={featuredCoverMap[c.category]}
                    alt={c.title}
                    className="absolute inset-0 h-full w-full object-cover transition duration-500 group-hover:scale-105"
                  />
                  <span className="absolute right-4 top-4 rounded-full bg-white/95 px-3 py-1 text-xs font-bold text-slate-800 shadow-sm">
                    {tc("lessons", { count: c.lessonCount })}
                  </span>
                </div>
                <div className="p-6">
                  <h3 className="font-serif text-lg font-bold text-[var(--navy)] transition group-hover:text-blue-700">
                    {c.title}
                  </h3>
                  <p className="mt-2 line-clamp-2 text-sm leading-relaxed text-slate-600">
                    {c.subtitle}
                  </p>
                  <span className="mt-4 inline-flex items-center text-sm font-semibold text-blue-600">
                    {tc("detail")}
                    <span className="ml-1 transition group-hover:translate-x-0.5">→</span>
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* CTA 带 */}
      <section className="ui-enter ui-enter-delay-3 site-container section-block">
        <div className="relative overflow-hidden rounded-[2rem] bg-gradient-to-r from-blue-700 via-blue-800 to-indigo-900 px-8 py-14 text-center text-white shadow-xl shadow-blue-900/20 md:px-16">
          <div className="pointer-events-none absolute -right-24 -top-24 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
          <div className="pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-amber-400/20 blur-3xl" />
          <h2 className="font-serif relative text-2xl font-bold md:text-3xl">{t("ctaBandTitle")}</h2>
          <p className="relative mx-auto mt-4 max-w-2xl text-slate-200">
            {t("ctaBandSubtitle")}
          </p>
          <div className="relative mt-10 flex flex-wrap justify-center gap-4">
            <Link
              href="/courses"
              className="ui-interactive-btn inline-flex rounded-full bg-white px-8 py-3.5 text-sm font-bold text-blue-900 shadow-lg transition hover:bg-amber-50"
            >
              {t("ctaBandPrimary")}
            </Link>
            <Link
              href="/contact"
              className="ui-interactive-btn inline-flex rounded-full border-2 border-white/40 px-8 py-3.5 text-sm font-semibold text-white transition hover:bg-white/10"
            >
              {t("ctaBandSecondary")}
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}